<!-- 模板标签：设置网页标签与内容-->
<template>
	<div class="login">
		<div class="main">
			<div class="header">
				<img src="/pics/mylogo.png" alt="logo">
				<span>智能家居可视化管理系统平台</span>
			</div>
			<div class="content">
				<!-- 背景图 -->
				<div>
				</div>
				<!-- 表单 -->
				<div>
					<!-- 用户登录 -->
					<div>
						<h4>用户登录</h4>
						<h5 v-text="error"></h5>
						<div class="username">
							<input type="text" required placeholder="请输入用户名" v-model="username">
						</div>
						<div class="password">
							<input type="password" required placeholder="请输入密码" v-model="password">
						</div>
						<!-- 登录-->
						<div class="btn">
							<input type="button" value="登录" @click="login">
						</div>
						<!-- 去注册，找回密码 -->
						<div class="reg">
							<!-- 直接跳转 -->
							<a href="/register">去注册</a>
							<a href="#">找回密码</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<!--新语法 -->
<script setup>
	// 导入qs
	import qs from 'qs';
	//导入axios
	import axios from 'axios';
	import {
		ref
	} from 'vue';
	//导入路由
	import {
		useRoute,
		useRouter
	} from "vue-router";
	//初始化变量
	var username = ref(null);
	var password = ref(null);
	var error = ref(null);
	//创建方法实现跳转
	var router = useRouter(); //生成路由对象,实现跳转
	//创建方法实现登录
const login = () => {
  // 取值
  let us = username.value.trim();
  let ps = password.value.trim();

  axios({
    url: 'user/login',
    method: 'post',
    params: {
      username: us,
      password: ps
    }
  }).then((res) => {
    if (res.data.code == 100) {
      // 假设返回的响应中包含 user_id 和 token
      const userId = res.data.data.user_id; // 根据实际数据结构获取 user_id
      const token = res.data.data.token; // 根据实际数据结构获取 token
      localStorage.setItem('user_id', userId); // 存入本地存储
      localStorage.setItem('token', token); // 存入 token
      router.push('/index');
    } else {
      error.value = res.data.message;
	  username.value="";
	  password.value="";
    }
  }).catch((er) => { // 输出系统错误
    console.log(er);
  });
}

</script>
<!--局部样式-->
<style scoped>
	/*vw：屏宽的100等份的1个单位,1vw  */
	/*vh：屏高的100等份的1个单位,1vh  */
	.login {
		width: 100vw;
		height: 100vh;
		background-color: #00A9F0;
		padding-top: 10vh;
		/* 将盒子转换为边框盒子 */
		box-sizing: border-box;
	}

	.login>.main {
		height: 80vh;
		/* background-color: pink; */
	}
    .login>.main>.header{
		height:6vh;
		line-height: 6vh;
		/* background-color: pink; */
	}
	.login>.main>.header>img {
		width: 2vw;
		position: relative;
		top: 0.5vw;
		margin-right: 0.3vw;
	}
	.login>.main>.header>span{
		font-size: 2vw;
		color:black;
		text-shadow: 1px 1px white ;
	}

	/*主要内容*/
	/* 弹性盒子的应用flex */
	.login .main .content {
		/* background-color: grey; */
		height: 75vh;
		/* 将此元素转换为弹性盒子，子元素自动转换为行内块元素，以便它的子元素按比例分配 */
		display: flex;
		/* 给子元素设置排更的方向，默认为按行排row */
		flex-direction: row;
	}

	/* 子元素设置样式 */
	.login .main .content>div:nth-of-type(1) {
		/* outline: 1px solid red; */
		/* 设置背景图 */
		background: url('/pics/background_img.png')no-repeat;
		/* 背景图大小100% 100%; */
		background-size: cover;
		/* 位置 */
		background-position: center;
		/* 设置比例 */
		flex: 3;
	}

	/* 右边表单 */
	.login .main .content>div:nth-of-type(2) {
		/* outline: 2px solid yellow; */
		/* 设置比例 */
		flex: 2;
	}

	/* 表单内容 */
	.login .main .content>div:nth-of-type(2)>div {
		background-color: white;
		width: 20vw;
		height: 45vh;
		/* 孙子元素水平居中 */
		margin: 0 auto;
		margin-top: 15vh;
		padding-top: 8vh;
		box-sizing: border-box;
		border-radius: 0.6vw;
	}

	.login .main .content>div:nth-of-type(2)>div>h4 {
		color: #00A9F0;
		text-align: center;
		height: 6vh;
		line-height: 6vh;
		/* 文字的间距 */
		letter-spacing: 1vw;
		padding-left: 1vw;
		/* background-color: pink; */
	}

	.login .main .content>div:nth-of-type(2)>div>h5 {
		text-align: center;
		color: red;
	}

	.login .main .content>div:nth-of-type(2)>div>.username>input {
		width: 16vw;
		height: 4vh;
		margin-left: 2vw;
		margin-top: 2vh;
	}

	.login .main .content>div:nth-of-type(2)>div>.password>input {
		width: 16vw;
		height: 4vh;
		margin-left: 2vw;
		margin-top: 2vh;
	}

	/* 自定义登录按钮 */
	.login .main .content>div:nth-of-type(2)>div>.btn>input {
		width: 16vw;
		height: 5vh;
		margin-left: 2vw;
		margin-top: 2vh;
		/* 去默认的内外边框 */
		border: none;
		outline: medium;
		background-color: #00A9F0;
		color: white;
		font-size: 1vw;
		letter-spacing: 0.6vw;
		padding-left: 0.6vw;
	}

	/* 注册与找回 */
	.login .main .content>div:nth-of-type(2)>div>.reg {
		width: 16vw;
		margin: 0 auto;
		/* outline: 1px solid red; */
		height: 6vh;
		line-height: 6vh;
		/* 父元素相对定位 */
		position: relative;
	}

	/* 自定义a的文本颜色 */
	.login .main .content>div:nth-of-type(2)>div>.reg>a:nth-of-type(1) {
		color: #00A9F0;
	}

	/* 自定义a鼠标覆盖的效果 */
	.login .main .content>div:nth-of-type(2)>div>.reg>a:nth-of-type(1):hover {
		color: red;
		/* 设置上中下划线:overline,line-through,underline */
		/* text-decoration:line-through; */
	}

	.login .main .content>div:nth-of-type(2)>div>.reg>a:nth-of-type(2) {
		position: absolute;
		/* 子元素对齐父元素的右边框 */
		right: 0;
	}
</style>